<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="form px-[15px] pt-[15px] border-bottom">
      <el-form>
        <el-row :gutter="12">
          <el-col :span="3">
            <el-form-item>
              <el-select class="!w-full" v-model="form.status">
                <el-option label="全部游戏" value="-1" />
                <el-option label="等待中" value="0" />
                <el-option label="成功" value="1" />
                <el-option label="失败" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="flex justify-between">
              <el-form-item>
                <el-button type="danger" @click.stop="emit('changeType', 'list')">返回</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="grow-[1] h-0 mx-[15px] mt-[10px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="list"
        height="100%"
        border
        stripe
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="LotteryName" label="游戏类型">
          <template #default="{ row }: TableItem">
            {{ row.LotteryName || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="BitchNo" label="游戏期数">
          <template #default="{ row }: TableItem">
            {{ row.BitchNo || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Cat2" label="下注内容" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Cat2 || "--" }}-{{ row.Cat3 || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Amount" label="下注金额">
          <template #default="{ row }: TableItem">
            {{ row.Amount || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Msg" label="飞单结果">
          <template #default="{ row }: TableItem">
            <span v-if="row.Msg">{{ row.Msg }}</span>
            <span class="text-green" v-else>成功</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="LuckCode" label="开奖结果" width="380">
          <template #default="{ row }: TableItem">
            <template v-if="row.LuckCode">
              <template v-if="row.CategoryId == GameCategory.lhc">
                <div>
                  <lhc-ball
                    class="!mr-[4px]"
                    :num="num"
                    :key="i"
                    v-for="(num, i) in formatNum(row)"
                  />
                </div>
              </template>
              <template v-if="row.CategoryId == GameCategory.pcdd">
                <div class="flex items-center justify-center">
                  <pcdd-ball class="!ml-[4px]" :num="formatNum(row)?.[0]" />
                  <pcdd-ball class="!ml-[4px]" :num="formatNum(row)?.[1]" />
                  <pcdd-ball class="!ml-[4px]" :num="formatNum(row)?.[2]" />
                  <span class="mx-[4px]">+</span>
                  <pcdd-ball :num="formatCount(row)" />
                </div>
              </template>
              <template v-if="row.CategoryId == GameCategory.sc">
                <div>
                  <sc-ball
                    class="!mr-[2px]"
                    :num="num"
                    :key="i"
                    v-for="(num, i) in formatNum(row)"
                  />
                </div>
              </template>
              <template v-if="row.CategoryId == GameCategory.ssc">
                <div>
                  <ssc-ball
                    class="!mr-[4px]"
                    :num="num"
                    :key="i"
                    v-for="(num, i) in formatNum(row)"
                  />
                </div>
              </template>
            </template>
            <template v-else>
              <div>--</div>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end my-[10px] mx-[15px]">
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useList } from "@/hooks/useList";
import { reqDapanReportDetail } from "@/api/flyalone";
import { GameCategory } from "@/enums";

interface TableItem {
  row: DapanReportDetailMo;
}
interface Params {
  Status?: string;
  FdReportId: number;
}

const props = withDefaults(
  defineProps<{
    type: "list" | "detail" | "fail";
    pid: number | null;
  }>(),
  {
    type: "list"
  }
);

const emit = defineEmits(["changeType"]);
const form = reactive({
  status: "-1"
});

const getParams = () => {
  const params: Params = {
    FdReportId: props.pid!
  };
  if (form.status && form.status != "-1") {
    params.Status = form.status;
  }
  return params;
};

const { elTableRef, state, list, getData } = useList<DapanReportDetailMo, Params>(
  reqDapanReportDetail,
  getParams
);

const formatNum = (row: DapanReportDetailMo) => {
  return row.LuckCode.split(",").map(Number);
};

const formatCount = (row: DapanReportDetailMo) => {
  return row.LuckCode.split(",")
    .map(Number)
    .reduce((a, b) => a + b, 0);
};

defineExpose({
  getData
});
</script>
